<template>
  <div class="main-bg" id="mian">
    <!-- title -->
    <h1>知了工资条后台管理</h1>
    <!-- //title -->
    <div class="sub-main-w3">
      <div class="image-style">

      </div>
      <!-- vertical tabs -->
      <div class="vertical-tab">
        <div id="section1" class="section-w3ls">
          <input type="radio" name="sections" id="option1" checked>
          <label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
          <article>
            <form action="#" method="post">
              <h3 class="legend">账号登录</h3>
              <div class="input">
                <span class="fa fa-envelope-o" aria-hidden="true"></span>
                <input type="text" v-model="logindata.user" placeholder="手机" name="user">
              </div>
              <div class="input">
                <span class="fa fa-key" aria-hidden="true"></span>
                <input type="password" v-model="logindata.password" placeholder="密码" name="password">
              </div>
              <el-button
                  type="success"
                  @click="login"
                  class="btn submit"
                  v-loading.fullscreen.lock="fullscreenLoading">
                  登录
                </el-button>
              <a href="#" class="bottom-text-w3ls">忘记密码?</a>
            </form>
          </article>
        </div>
        <div id="section2" class="section-w3ls">
          <input type="radio" name="sections" id="option2">
          <label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
          <article>
            <form action="#" method="post">
              <h3 class="legend">注册帐户</h3>
              <div class="input">
                <span class="fa fa-user-o" aria-hidden="true"></span>
                <input type="text" v-model="registerdata.user" placeholder="手机号码" name="user" required />
              </div>
              <div class="input">
                <span class="fa fa-key" aria-hidden="true"></span>
                <input type="text" v-model="registerdata.enterpriseName" placeholder="企业名称" name="enterpriseName" required />
              </div>
              <div class="input">
                <span class="fa fa-key" aria-hidden="true"></span>
                <input type="password" v-model="registerdata.password" placeholder="密码" name="password"
                  required />
              </div>
              <el-button
                  type="success"
                  @click="register"
                  class="btn submit"
                  v-loading.fullscreen.lock="fullscreenLoading">
                  注 册
                </el-button>
            </form>
          </article>
        </div>
        <div id="section3" class="section-w3ls">
          <input type="radio" name="sections" id="option3">
          <label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
          <article>
            <form action="#" method="post">
              <h3 class="legend last">重置密码</h3>
              <p class="para-style">请在下面输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
              <p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a></p>
              <div class="input">
                <span class="fa fa-envelope-o" aria-hidden="true"></span>
                <input type="email" v-model="forgetdata.email" placeholder="邮箱" name="email" required />
              </div>
              <button type="submit" class="btn submit last-btn">提交</button>
            </form>
          </article>
        </div>
      </div>
      <!-- //vertical tabs -->
      <div class="clear"></div>
    </div>
    <!-- copyright -->
    <div class="copyright">
      <h2>Copyright &copy; 2019 - {{nowYear}} 版权所有| by
        <a href="#">ChanKwongwing</a>
      </h2>
    </div>
    <!-- //copyright -->
  </div>
</template>

<script>
import '../assets/css/style.css'
import { login, registers } from '../require/api.js'
import Qs from 'qs'
export default {
  data () {
    return {
      fullscreenLoading: false,
      logindata: {
        user: '',
        password: ''
      },
      registerdata: {
        user: '',
        password: '',
        enterpriseName: ''
      },
      nowYear: '© 广西喆喆文化科技有限公司',
      forgetdata: {
        email: ''
      }
    }
  },
  methods: {
    async login () {
      let logindata = Qs.stringify({
        user: this.$getRsaCode(this.logindata.user),
        password: this.$getRsaCode(this.logindata.password)
      })
      this.fullscreenLoading = true
      const { data: res } = await login(logindata)
      if (res.code == 0) {
        setTimeout(() => {
          this.fullscreenLoading = false
          this.$message({
            message: res.isMessage,
            type: 'success'
          })
          window.localStorage.setItem('token', res.data.token)
          window.localStorage.setItem('user', this.$getRsaCode(this.logindata.user))
          window.localStorage.setItem('password', this.$getRsaCode(this.logindata.password))
          let rsaData = {
            rsaUser: this.$getRsaCode(this.logindata.user),
            rsaPassword: this.$getRsaCode(this.logindata.password),
            token: res.data.token,
            user: this.logindata.user,
            password: this.logindata.user.password,
          }
          this.$store.commit('gztUserInfo', rsaData)
          this.$parent.loginCode()
        }, 1000)
      } else if (res.code == 1) {
        setTimeout(() => {
          this.fullscreenLoading = false
          this.$message(res.isMessage)
        }, 1000)
      } else if (res.code == 2) {
        setTimeout(() => {
          this.fullscreenLoading = false
          this.$message.error(res.isMessage)
        }, 1000)
      }
    },
    async register () {  // 注册
      let registerdata = Qs.stringify({
        user: this.$getRsaCode(this.registerdata.user),
        password: this.$getRsaCode(this.registerdata.password),
        enterpriseName: this.$getRsaCode(this.registerdata.enterpriseName)
      })
      //this.fullscreenLoading = true
      const { data: res } = await registers(registerdata)
      if (res.code == 0) {
        setTimeout(() => {
          this.fullscreenLoading = false
          this.$message({
            message: res.isMessage,
            type: 'success'
          })  
        }, 1000)
      }
    }
  }
}
</script>

<style>
</style>
